<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>填写注册信息</h2>
		用户名称：<input type="text" name='name'/><span id="nameError"></span><br>
		输入密码：<input type="text" /><span id="passwordError"></span><br>
		确认密码：<input type="text" /><span id="passwordError1"></span><br>
		手机号码：<input type="text" /><span id="huError"></span><br>
		电子邮箱：<input type="text" /><span id="EError"></span><br>
		<input type="button"value="注册" />
		
	    <script>
	    	/*给所有的input添加失去焦点事件
	    	  1.判断input内的值是否为空
	    	   若为空，显示不能为空的错误信息，return结束（不用继续判断）
	    	   input值与正则表达式匹配，若正确提示正确信息，若不匹配提示错误信息*/
	    	var inputs=document.getElementsByTagName('input');
	    	var passwordError=document.getElementById('passwordError');
	    	var passwordError1=document.getElementById('passwordError1');
	    	var huError=document.getElementById('huError');
	    	var EError=document.getElementById('EError');
	    	function yonhuming(obj){
				//验证obj内部的值是否是4位数字
				var str=obj.value;
				//4位数字的正则表达式:\d表示0-9的数字，{n}表示前面的字符出现n次
				var reg=/^[\u4e00-\u9fa5]{2,4}$/;
				if(!str.match(reg)){//不匹配
					nameError.innerHTML="输入错误";
				}else{
					nameError.innerHTML='';
				}
			}
	    //给所有的input添加失去焦点事件
	    for(var i=0;i<inputs.length;i++){
	    	inputs[i].onblur=inputBlur;
			}	
		
		//定义input失去焦点事件：判断内容是否为空，是否正确
	    function inputBlur(){
	    	//获取当前input的name，value，提示信息
	    	var name=this.name;
	    	var value=this.value;
	    	var nameError=this.nameError;
	    	//获取显示正确或错误提示信息的div元素
	    	
	    	//判断当前input的value值，若为空；
	    	yonhuming(this);
	    }
	    </script>
	</body>
</html>
